---
category: Level 1 — Basic
contributors:
    - Sixeight
    - eran-nussbaum
created: '2020-02-16'
keywords: classList, classList add, classList remove, classList toggle
title: Add or remove class from an element
updated: '2020-03-31'
---

## Add a class to an element

Note that multiple parameters for the `add()` [isn't supported](https://caniuse.com/#feat=classlist) in IE 11.

```js
ele.classList.add('class-name');

// Add multiple classes (Not supported in IE 11)
ele.classList.add('another', 'class', 'name');
```

## Remove a class from an element

Note that multiple parameters for the `remove()` [isn't supported](https://caniuse.com/#feat=classlist) in IE 11.

```js
ele.classList.remove('class-name');

// Remove multiple classes (Not supported in IE 11)
ele.classList.remove('another', 'class', 'name');
```

## Toggle a class

```js
ele.classList.toggle('class-name');
```

## See also

-   [Check if an element has given class](https://phuoc.ng/collection/html-dom/check-if-an-element-has-given-class/)
-   [Drag and drop element in a list](https://phuoc.ng/collection/html-dom/drag-and-drop-element-in-a-list/)
-   [Drag and drop table column](https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/)
-   [Drag and drop table row](https://phuoc.ng/collection/html-dom/drag-and-drop-table-row/)
-   [Highlight an element when dragging a file over it](https://phuoc.ng/collection/html-dom/highlight-an-element-when-dragging-a-file-over-it/)
-   [Resize columns of a table](https://phuoc.ng/collection/html-dom/resize-columns-of-a-table/)
-   [Show a custom context menu at clicked position](https://phuoc.ng/collection/html-dom/show-a-custom-context-menu-at-clicked-position/)
